<template>
  <div class="qr-code">
    <div class="qr-code__card">
      <div class="qr-code__card__tips">
        <div class="qr-code__card__tips__header">
          <div class="company__logo">
            <el-image fit="cover" :src="company[0].logo" style="width: 100%; height: 100%;" />
          </div>
          <div class="company__name">{{ company[0].name }}</div>
        </div>

        <div class="qr-code__card__tips__tips">
          <div class="tips__title">
            <div class="title">关于入职二维码</div>
            <div class="under-line" />
          </div>
          <div class="tips__list">
            <div
              v-for="(item, index) in tips"
              :key="index"
              class="tips__list__item"
            >
              <i class="el-icon-success" style="color: #60C57C;font-size: 21px;" />
              <div class="tip-content">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="qr-code__card__code">
        <div class="title">微信扫一扫</div>
        <div class="qr__code">
          <div
            v-if="loading"
            v-loading="loading"
            style="width: 100%;height: 100%;"
          />
          <el-image v-if="!loading" :src="data" @click="qrcodeEntrys" />
        </div>
        <div class="download__button">
          <el-button
            type="success"
            size="small"
            style="background-color: #60C57C;"
            @click="download"
          >
            点击下载二维码
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EntryInfo from '@/components/Entry/Info'
import { qrcodeEntry } from '@/api/entry'
import { getDept, getPosition } from '@/api/basic'
import { mapGetters } from 'vuex'
export default {
  name: 'Documentation',
  components: { EntryInfo },
  data() {
    return {
      data: '',
      isShow: true,
      loading: false,
      family: [],
      depts: [],
      positions: [],
      tips: [
        '该二维码可作为本公司面试、入职、查询面试情况使用',
        '一般情况下二维码将永久使用',
        '可下载二维码张贴，方便扫码'
      ]
    }
  },
  computed: {
    ...mapGetters(['company'])
  },
  created() {
    this.qrcodeEntrys()
    this.permissionCheck()
  },
  methods: {
    async qrcodeEntrys() {
      this.loading = true
      try {
        const res = await qrcodeEntry()
        this.data = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '二维码获取失败')
      } finally {
        this.loading = false
      }
    },

    async getPositions() {
      const res = await getPosition()
      this.positions = res.data
    },
    async getDepts() {
      const res = await getDept()
      this.depts = res.data
    },
    async permissionCheck() {
      await Promise.allSettled([
        this.getPositions(),
        this.getDepts()
      ])

      if (this.depts.length > 0 || this.positions.length > 0) { return }

      this.isShow = false
      await this.$confirm(
        '您目前没有任何部门 / 岗位，快去添加一个吧！', '提示',
        {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          showCancelButton: false
        }
      ).catch(() => {})

      this.$router.push('/station/show')
    },

    download() {
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = this.data
      aLink.download = '二维码.jpg'
      // 触发点击-然后移除
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
    }
  }
}
</script>

<style lang="scss" scoped>
  .qr-code {
    width: 100%;
    //padding: 200px 0;
    height: calc(100vh - 84px);
    background-color: rgba(#000000, .3) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    &__card {
      width: 798px;
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      &__tips {
        width: 48%;
        padding: 48px;
        background-image: url("https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1706835771_x9hvJeisMr.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-color: #fff;

        &__header {
          display: flex;
          align-items: center;
          .company__logo {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            overflow: hidden;
          }

          .company__name {
            margin-left: 10px;
            color: #3D3D3D;
            font-size: 24px;
            font-weight: 700;
            font-family: Microsoft YaHei, Microsoft YaHei;
          }
        }

        &__tips {
          margin-top: 32px;

          .tips__title {

            .title {
              font-size: 18px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 700;
              color: #3D3D3D;
            }

            .under-line {
              margin-top: 12px;
              width: 20px;
              height: 4px;
              background-color: #60C57C;
            }
          }

          .tips__list {
            margin-top: 30px;
            &__item {
              display: flex;
              align-items: center;
              margin-bottom: 40px;

              &:first-child {
                align-items: normal;
              }

              //&:last-child {
              //  margin-bottom: 0;
              //}

              .tip-content {
                margin-left: 11px;
                font-size: 16px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                color: #3D3D3D;
                line-height: 24px;
              }
            }
          }
        }

      }

      &__code {
        width: 52%;
        padding: 82px 108px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title {
          font-size: 18px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #60C57C;
        }

        .qr__code {
          margin-top: 36px;
          width: 160px;
          height: 160px;
        }

        .download__button {
          margin-top: 48px;
        }
      }
    }

  }
  .work-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
  }
</style>
